import React, { useEffect } from 'react'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { postLogin } from '../../api/index'
function Login() {
  const navigate = useNavigate()
  const onFinish = (values: any) => {
     const reg = /^[a-zA-Z0-9_-]{4,16}$/
    postLogin(values).then((res: any) => {
      // 正则验证username
      if (!reg.test(values.username)) {
        alert('用户名格式不正确')
        return
      }
      console.log(res)
      localStorage.setItem('token', res.data.data.token)
      if (res.data.err_code === 0) {
        navigate('/home')
      }
    })
  }
  return (
    <div>
      <Form
        name='form'
        onFinish={onFinish}
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Item
          name='username'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入密码' />
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login
